<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title><?php echo $title;?></title>
		<link rel="stylesheet" href="../public/css/style.css">
		<script src="../public/js/jquery.js"></script>
		<script src="../public/js/jquery.timeout.js"></script>
		<script>
			$(function () {
				//关闭页面前提示
				$(window).on('beforeunload', function () {
					var message = "您尚未交卷！此操作将导致您的回答丢失。"
					return message;
				});
				
				timeOver = false; //保存当前是否已经达到交卷时间
				//倒计时功能
				$(".timeout").timeout({
					//考试时间（页面刷新时，时间会重置。）
					"maxTime": 1800,
					//到达时间自动交卷。（如果浏览器禁用JavaScript，此功能不会生效）
					"onTimeOver": function () {
						timeOver = true;
						alert("考试时间结束，系统自动交卷。");
						$("#testForm").submit();//交卷
					}
				});
				$("#testForm").submit(function (event) {
					$(window).off("beforeunload");      //解除绑定页面关闭事件
					timeOver || checkMultiple(event)	//检查多选题是否全部作答
				});
				//多选题至少选择一项
				function checkMultiple(event) {
					$(".jq-multiple .question-each").each(function () {
						if ($(this).find(".question-option input[type=checkbox]:checked").length < 1) {
							$(this).find(".question-option input[type=checkbox]:first").focus();
							event.preventDefault();  //阻止表单提交
							alert('您有多选题未作答。');
							return false;
						}
					});
				};
			});
		</script>
	</head>
	<body>
		<div class="top">
			<div class="top-title">正在考试 （剩余时间 <span class="timeout"></span>）</div>
		</div>
		<div class="main">
			<div class="main-wrap">
				<!-- 顶部标题 -->
				<div class="question-top">
					<!-- 试卷标题 -->
					<div class="question-title">在线测试</div>
					<!-- 题型导航 -->
					<div class="question-nav">
						<a href="#binary">判断题</a>
						<a href="#single">单选题</a>
						<a href="#multiple">多选题</a>
						<a href="#fill">填空题</a>
					</div>
				</div>
				<!-- 题目内容 -->
				<form action="total.php?name=<?php echo $name;?>" method="post" id="testForm">
					<!-- 判断题 -->
					<div id="binary" class="anchor" ></div>
					<div class="question-wrap">
						<div class="question-type">一、判断题<span>（共<?php echo $judgeCount;?>题，每题<?php echo $per;?>分）</span></div>
						<?php $i=0; foreach($jlist as $k => $v):$i++;?>
						<div class="question-each">
							<!-- 标题 -->
							<div class="question-name"><?php echo $i;?>.<?php echo $v['question'];?></div>
							<!-- 选项 -->
							<div class="question-option">
								<label><input type="radio" value="yes" name="judge[<?php echo $v['id'];?>]" required>对</label>
								<label><input type="radio" value="no" name="judge[<?php echo $v['id'];?>]" required>错</label>
							</div>
						</div>
						<?php endforeach;?>
					</div>
					<!-- 单选题 -->
					<div id="single" class="anchor" ></div>
					<div class="question-wrap">
						<div class="question-type">二、单选题<span>（共<?php echo $singleCount;?>题，每题<?php echo $per;?>分）</span></div>
						<?php $i=0;foreach($list as $k => $v): $i++;?>
						<div class="question-each">
							<!-- 标题 -->
							<div class="question-name"><?php echo $i;?>.<?php echo $v['question'];?></div>
							<!-- 选项 -->
							<div class="question-option">
								<label><input type="radio" value="A" name="single[<?php echo $v['id'];?>]" required>A. <?php echo $v['A'];?></label>
								<label><input type="radio" value="B" name="single[<?php echo $v['id'];?>]" required>B. <?php echo $v['B'];?></label>
								<label><input type="radio" value="C" name="single[<?php echo $v['id'];?>]" required>C. <?php echo $v['C'];?></label>
								<label><input type="radio" value="D" name="single[<?php echo $v['id'];?>]" required>D. <?php echo $v['D'];?></label>
							</div>
						</div>
						<?php endforeach;?>
					</div>
					<!-- 多选题 -->
					<div id="multiple" class="anchor" ></div>
					<div class="question-wrap jq-multiple">
						<div class="question-type">三、多选题<span>（共<?php echo $multipleCount;?>题，每题<?php echo $per;?>分）</span></div>
						<?php $i=0;foreach($mlist as $k => $v): $i++;?>
						<div class="question-each">
							<!-- 标题 -->
							<div class="question-name"><?php echo $i;?>.<?php echo $v['question'];?></div>
							<!-- 选项 -->
							<div class="question-option">
								<label><input type="checkbox" value="A" name="multiple[<?php echo $v['id'];?>][]">A. <?php echo $v['A'];?></label>
								<label><input type="checkbox" value="B" name="multiple[<?php echo $v['id'];?>][]">B. <?php echo $v['B'];?></label>
								<label><input type="checkbox" value="C" name="multiple[<?php echo $v['id'];?>][]">C. <?php echo $v['C'];?></label>
								<label><input type="checkbox" value="D" name="multiple[<?php echo $v['id'];?>][]">D. <?php echo $v['D'];?></label>
							</div>
						</div>
						<?php endforeach;?>
					</div>
					<!-- 填空题 -->
					<div id="fill" class="anchor" ></div>
					<div class="question-wrap">
						<div class="question-type">四、填空题<span>（共<?php echo $fillCount;?>题，每题<?php echo $per;?>分）</span></div>
						<?php $i=0;foreach($flist as $k => $v):$i++;?>
						<div class="question-each">
							<!-- 标题 -->
							<div class="question-name"><?php echo $i;?>.<?php echo $v['question'];?></div>
							<!-- 选项 -->
							<div class="question-option">
								<span>请输入答案：<input type="text" name="fill[<?php echo $v['id'];?>]" required></span>
							</div>
						</div>
						<?php endforeach;?>
					</div>
					<div class="question-act">
						<input type="hidden" name="time" value="<?php echo $time;?>"/> 
						<input type="hidden" name="singleCount" value="<?php echo $singleCount;?>"/> 
						<input type="hidden" name="multipleCount" value="<?php echo $multipleCount;?>"/> 
						<input type="hidden" name="judgeCount" value="<?php echo $judgeCount;?>"/>
						<input type="hidden" name="fillCount" value="<?php echo $fillCount;?>"/> 
						<input type="submit" value="交卷" >
					</div>
				</form>
			</div>
		</div>
		<div class="footer">
			PHP在线考试系统　本项目仅供学习使用
		</div>
	</body>
</html>